<!--
 * @Author: your name
 * @Date: 2020-10-12 12:53:58
 * @LastEditTime: 2020-10-19 14:59:49
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
-->
<template>
  <div class="wrapper">
    <tao-charts :data="option.mapCharts"
                @chart-click="getChartOption" />
  </div>
</template>

<script>
import axios from "axios"
import { reactive, onMounted } from "vue"
import { useRouter } from "vue-router"
import { mapCharts } from "./echarts"

export default {
  setup() {
    const router = useRouter()
    // 指定图表的配置项和数据
    const option = reactive({
      mapCharts: {}
    })
    let abcde = "100000"
    const getChartOption = (data) => {
      if (data) {
        const district = new window.AMap.DistrictSearch({ subdistrict: 1, showbiz: false })
        district.search(data ? data.name : "中国", (status, result) => {
          if (status === "complete") {
            abcde = result.districtList[0].adcode
          }
        })
      }
      axios.get("https://restapi.amap.com/v3/config/district?keywords=北京&subdistrict=2&key=eea930edbfb0f478d7612371772e7ab9").then((res) => {
        // const { data } = res
        console.log(res, "resres")
        const demoData = {
          data2: [{
            name: "阜阳机场",
            type: "组织",
            value: [115.741759, 32.880409, 44]
          }],
          data3: [{
            name: "阜阳师范",
            type: "机构",
            value: [115.804502, 32.893022, 222]
          }]
        }
        mapCharts(data ? data.name : "中国", abcde, demoData).then((mapss) => {
          option.mapCharts = mapss
        })
      })
    }

    const handleToLink = (item) => {
      router.push({ name: item.url })
    }
    onMounted(() => {
      getChartOption()
    })
    return { option, handleToLink, getChartOption }
  }
}
</script>
<style lang="scss" scoped>
.wrapper {
  width: 100vw;
  height: 100vh;
  position: absolute;
  margin: 0;
  padding: 0;
  color: #ffffff;
}
</style>
